<template>
	<view class="promotion-page">
		<!-- 推广中心头部 -->
		<view class="promotion-header">
			<view class="user-info">
				<view class="avatar">
					<uni-icons type="person" size="24" color="#fff"></uni-icons>
				</view>
				<view>
					<text class="user-name">{{ userInfo.name }}</text>
					<text class="user-level">推广等级：{{ userInfo.level }}</text>
				</view>
			</view>
		</view>

		<!-- 统计数据 -->
		<view class="stats-grid">
			<view class="stat-item" v-for="stat in stats" :key="stat.label">
				<text class="stat-value">{{ stat.value }}</text>
				<text class="stat-label">{{ stat.label }}</text>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="action-list">
			<view class="action-item" v-for="action in actions" :key="action.title" @click="handleActionClick(action)">
				<view class="action-icon">
					<uni-icons :type="action.icon" size="20" :color="action.color"></uni-icons>
				</view>
				<view class="action-info">
					<text class="action-title">{{ action.title }}</text>
					<text class="action-desc">{{ action.desc }}</text>
				</view>
				<uni-icons type="right" size="14" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 推广海报弹窗 -->
		<uni-popup ref="posterPopup" type="center">
			<view class="poster-popup">
				<view class="poster-content">
					<view class="poster-canvas">
						<!-- 海报背景 -->
						<view class="poster-background">
							<image class="bg-image" src="/static/images/poster-bg.jpg" mode="aspectFill"></image>
						</view>
						<!-- 用户信息 -->
						<view class="poster-user-info">
							<image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
							<text class="user-name">{{ userInfo.name }}</text>
							<text class="user-title">诚邀您加入我们</text>
						</view>
						<!-- 小程序码 -->
						<view class="poster-qrcode">
							<image class="qrcode-image" :src="qrCodeUrl" mode="aspectFit"></image>
							<text class="scan-text">扫码加入</text>
						</view>
						<!-- 推广文案 -->
						<view class="poster-text">
							<text class="slogan">加入我们的商城</text>
							<text class="description">优质商品 · 超值优惠 · 精彩活动</text>
						</view>
					</view>
				</view>
				<!-- 按钮组 -->
				<view class="poster-actions">
					<button class="btn-cancel" @click="closePosterPopup">取消</button>
					<button class="btn-save" @click="savePoster">保存海报</button>
				</view>
			</view>
		</uni-popup>
		<!-- 收益统计弹窗 -->
		<uni-popup ref="earningsPopup" type="center">
			<view class="stats-popup earnings-popup">
				<view class="stats-header">
					<text class="stats-title">收益统计</text>
					<uni-icons type="close" size="20" color="#999" @click="closeEarningsPopup"></uni-icons>
				</view>
				<view class="stats-overview">
					<view class="stats-item">
						<text class="item-label">今日收益</text>
						<text class="item-value">¥128.00</text>
					</view>
					<view class="stats-item">
						<text class="item-label">本月收益</text>
						<text class="item-value">¥3,456.00</text>
					</view>
					<view class="stats-item">
						<text class="item-label">待结算</text>
						<text class="item-value">¥892.00</text>
					</view>
				</view>
				<view class="stats-tabs">
					<view class="tab-header">
						<text class="tab" :class="{ active: earningsTab === 'members' }"
							@click="earningsTab = 'members'">推广成员</text>
						<text class="tab" :class="{ active: earningsTab === 'orders' }"
							@click="earningsTab = 'orders'">订单明细</text>
					</view>
					<scroll-view class="tab-content" scroll-y>
						<!-- 推广成员列表 -->
						<view v-if="earningsTab === 'members'" class="member-list">
							<view class="member-item" v-for="member in promotionMembers" :key="member.id">
								<image class="member-avatar" :src="member.avatar" mode="aspectFill"></image>
								<view class="member-info">
									<text class="member-name">{{ member.name }}</text>
									<text class="member-date">加入时间：{{ member.joinDate }}</text>
								</view>
								<view class="member-earnings">
									<text class="earnings-value">¥{{ member.totalEarnings }}</text>
									<text class="earnings-label">贡献收益</text>
								</view>
							</view>
						</view>
						<!-- 订单明细列表 -->
						<view v-if="earningsTab === 'orders'" class="order-list">
							<view class="order-item" v-for="order in promotionOrders" :key="order.id">
								<view class="order-header">
									<text class="order-id">订单号：{{ order.orderNo }}</text>
									<text class="order-status">{{ order.status }}</text>
								</view>
								<view class="order-content">
									<image class="order-image" :src="order.productImage" mode="aspectFill"></image>
									<view class="order-info">
										<text class="order-title">{{ order.productName }}</text>
										<view class="order-meta">
											<text class="order-price">订单金额：¥{{ order.amount }}</text>
											<text class="order-commission">佣金：¥{{ order.commission }}</text>
										</view>
									</view>
								</view>
								<view class="order-footer">
									<text class="order-time">{{ order.createTime }}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="stats-footer">
					<button class="btn-detail"
						@click="navigateToPage('/subpackage_user/user/promotion/earnings')">查看更多</button>
				</view>
			</view>
		</uni-popup>

		<!-- 人数统计弹窗 -->
		<uni-popup ref="membersPopup" type="center">
			<view class="stats-popup">
				<view class="stats-header">
					<text class="stats-title">人数统计</text>
					<uni-icons type="close" size="20" color="#999" @click="closeMembersPopup"></uni-icons>
				</view>
				<view class="stats-content">
					<view class="stats-item">
						<text class="item-label">今日新增</text>
						<text class="item-value">12人</text>
					</view>
					<view class="stats-item">
						<text class="item-label">本月新增</text>
						<text class="item-value">156人</text>
					</view>
					<view class="stats-item">
						<text class="item-label">总推广人数</text>
						<text class="item-value">1,234人</text>
					</view>
				</view>
				<view class="stats-footer">
					<button class="btn-detail"
						@click="navigateToPage('/subpackage_user/user/promotion/members')">查看详情</button>
				</view>
			</view>
		</uni-popup>

		<!-- 订单统计弹窗 -->
		<uni-popup ref="ordersPopup" type="center">
			<view class="stats-popup">
				<view class="stats-header">
					<text class="stats-title">订单统计</text>
					<uni-icons type="close" size="20" color="#999" @click="closeOrdersPopup"></uni-icons>
				</view>
				<view class="stats-content">
					<view class="stats-item">
						<text class="item-label">今日订单</text>
						<text class="item-value">8笔</text>
					</view>
					<view class="stats-item">
						<text class="item-label">本月订单</text>
						<text class="item-value">89笔</text>
					</view>
					<view class="stats-item">
						<text class="item-label">订单转化率</text>
						<text class="item-value">32%</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 用户信息
	const userInfo = ref({
		name: '张三',
		level: '黄金',
		avatar: '/static/images/default-avatar.png'
	})

	// 推广成员列表
	const promotionMembers = ref([{
			id: 1,
			name: '李四',
			avatar: '/static/images/default-avatar.png',
			joinDate: '2023-12-01',
			totalEarnings: '368.00'
		},
		{
			id: 2,
			name: '王五',
			avatar: '/static/images/default-avatar.png',
			joinDate: '2023-12-05',
			totalEarnings: '256.00'
		}
	])

	// 推广订单列表
	const promotionOrders = ref([{
			id: 1,
			orderNo: 'DD20231201001',
			status: '已完成',
			productName: '时尚休闲运动鞋',
			productImage: '/static/images/product-1.jpg',
			amount: '299.00',
			commission: '29.90',
			createTime: '2023-12-01 14:30:00'
		},
		{
			id: 2,
			orderNo: 'DD20231205002',
			status: '已完成',
			productName: '冬季保暖外套',
			productImage: '/static/images/product-2.jpg',
			amount: '458.00',
			commission: '45.80',
			createTime: '2023-12-05 16:20:00'
		}
	])

	// 当前选中的收益统计标签
	const earningsTab = ref('members')

	// 小程序码URL
	const qrCodeUrl = ref('/static/images/qrcode-example.jpg')

	// 统计数据
	const stats = ref([{
			value: '¥1,234',
			label: '累计收益'
		},
		{
			value: '56',
			label: '推广人数'
		},
		{
			value: '89',
			label: '推广订单'
		}
	])

	// 功能列表
	const actions = ref([{
			icon: 'hand-up',
			color: '#e91e63',
			title: '收益统计',
			desc: '查看推广收益和佣金情况',
		},
		{
			icon: 'staff',
			color: '#1976d2',
			title: '人数统计',
			desc: '查看已推广成员数据',
		},
		{
			icon: 'chart',
			color: '#4caf50',
			title: '订单统计',
			desc: '查看推广订单和佣金明细',
		},
		{
			icon: 'qrcode',
			color: '#ff9800',
			title: '推广小程序码',
			desc: '生成专属推广小程序码',
		}
	])

	// 弹窗引用
	const posterPopup = ref(null)
	const earningsPopup = ref(null)
	const membersPopup = ref(null)
	const ordersPopup = ref(null)

	// 处理功能点击
	const handleActionClick = (action) => {
		switch (action.title) {
			case '收益统计':
				showEarningsPopup()
				break
			case '人数统计':
				showMembersPopup()
				break
			case '订单统计':
				showOrdersPopup()
				break
			case '推广小程序码':
				showPosterPopup()
				break
			default:
				navigateToPage(action.path)
		}
	}

	// 显示收益统计弹窗
	const showEarningsPopup = () => {
		earningsPopup.value.open()
	}

	// 关闭收益统计弹窗
	const closeEarningsPopup = () => {
		earningsPopup.value.close()
	}

	// 显示人数统计弹窗
	const showMembersPopup = () => {
		membersPopup.value.open()
	}

	// 关闭人数统计弹窗
	const closeMembersPopup = () => {
		membersPopup.value.close()
	}

	// 显示订单统计弹窗
	const showOrdersPopup = () => {
		ordersPopup.value.open()
	}

	// 关闭订单统计弹窗
	const closeOrdersPopup = () => {
		ordersPopup.value.close()
	}

	// 显示海报弹窗
	const showPosterPopup = () => {
		posterPopup.value.open()
	}

	// 关闭海报弹窗
	const closePosterPopup = () => {
		posterPopup.value.close()
	}

	// 保存海报
	const savePoster = async () => {
		try {
			// 获取海报节点
			const posterCanvas = await uni.createSelectorQuery()
				.select('.poster-canvas')
				.fields({
					node: true,
					size: true
				})
				.exec()

			// 将节点转换为图片
			uni.canvasToTempFilePath({
				canvasId: posterCanvas[0].node,
				success: (res) => {
					// 保存图片到相册
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							uni.showToast({
								title: '海报已保存到相册',
								icon: 'success'
							})
							closePosterPopup()
						},
						fail: () => {
							uni.showToast({
								title: '保存失败，请检查权限设置',
								icon: 'none'
							})
						}
					})
				},
				fail: () => {
					uni.showToast({
						title: '生成海报失败',
						icon: 'none'
					})
				}
			})
		} catch (error) {
			console.error('保存海报错误:', error)
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			})
		}
	}

	// 页面导航
	const navigateToPage = (path) => {
		uni.navigateTo({
			url: path
		})
	}
</script>

<style lang="scss" scoped>
	.promotion-page {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.promotion-header {
		background: linear-gradient(135deg, #ff5a5f, #ff3f4b);
		color: white;
		padding: 60px 15px 20px;

		.user-info {
			display: flex;
			align-items: center;
			margin-bottom: 15px;

			.avatar {
				width: 50px;
				height: 50px;
				border-radius: 5px;
				background-color: rgba(255, 255, 255, 0.2);
				margin-right: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.user-name {
				display: block;
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 4px;
			}

			.user-level {
				display: block;
				font-size: 12px;
				opacity: 0.8;
			}
		}
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
		margin: 15px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

		.stat-item {
			text-align: center;

			.stat-value {
				display: block;
				font-size: 20px;
				font-weight: bold;
				color: #333;
				margin-bottom: 4px;
			}

			.stat-label {
				display: block;
				font-size: 12px;
				color: #666;
			}
		}
	}

	.stats-popup {
		.stats-footer {
			display: none;
		}
	}

	.earnings-popup {
		.tab-content {
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				width: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #ddd;
				border-radius: 2px;
			}
		}
	}

	.action-list {
		padding: 0 15px;

		.action-item {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 15px;
			border-radius: 8px;
			margin-bottom: 10px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

			.action-icon {
				width: 40px;
				height: 40px;
				border-radius: 20px;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 12px;
			}

			.action-info {
				flex: 1;

				.action-title {
					display: block;
					font-size: 15px;
					font-weight: 600;
					color: #333;
					margin-bottom: 4px;
				}

				.action-desc {
					display: block;
					font-size: 12px;
					color: #999;
				}
			}
		}
	}

	.stats-popup {
		width: 85vw;
		background-color: #fff;
		border-radius: 16px;
		overflow: hidden;
		max-height: 70vh;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
		display: flex;
		flex-direction: column;

		.stats-header {
			padding: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f0f0f0;
			flex-shrink: 0;

			.stats-title {
				font-size: 16px;
				font-weight: 600;
				color: #333;
			}
		}

		.stats-overview {
			padding: 16px;
			border-bottom: 1px solid #f0f0f0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
			flex-shrink: 0;

			.stats-item {
				text-align: center;

				.item-value {
					display: block;
					font-size: 16px;
					color: #ff5a5f;
					font-weight: 600;
					margin-bottom: 4px;
				}

				.item-label {
					display: block;
					font-size: 12px;
					color: #666;
				}
			}
		}

		.stats-content {
			flex: 1;
			overflow-y: auto;
			padding: 16px;

			&::-webkit-scrollbar {
				width: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #ddd;
				border-radius: 2px;
			}

			.stats-item {
				text-align: center;
				margin-bottom: 16px;

				.item-value {
					display: block;
					font-size: 16px;
					color: #ff5a5f;
					font-weight: 600;
					margin-bottom: 4px;
				}

				.item-label {
					display: block;
					font-size: 12px;
					color: #666;
				}
			}
		}

		.stats-footer {
			display: none;
		}

		.tab-content {
			max-height: 50vh;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				width: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #ddd;
				border-radius: 2px;
			}

			.member-list,
			.order-list {
				width: 100%;
				box-sizing: border-box;
				padding-right: 5px;
			}
		}
	}

	.stats-tabs {
		.tab-header {
			display: flex;
			border-bottom: 1px solid #f0f0f0;

			.tab {
				flex: 1;
				text-align: center;
				padding: 12px 0;
				font-size: 14px;
				color: #666;
				position: relative;
				transition: all 0.3s ease;

				&.active {
					color: #ff5a5f;
					font-weight: 500;

					&::after {
						content: '';
						position: absolute;
						bottom: -1px;
						left: 50%;
						transform: translateX(-50%);
						width: 20px;
						height: 2px;
						background-color: #ff5a5f;
						border-radius: 1px;
					}
				}
			}
		}

		.tab-content {
			max-height: 50vh;

			.member-list {
				.member-item {
					display: flex;
					align-items: center;
					padding: 12px;
					margin-bottom: 0;
					background-color: #f8f8f8;
					border-radius: 8px;
					width: 100%;
					box-sizing: border-box;
					border-bottom: 1px solid #eee;

					&:last-child {
						border-bottom: none;
					}

					.member-avatar {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin-right: 12px;
						flex-shrink: 0;
					}

					.member-info {
						flex: 1;
						min-width: 0;

						.member-name {
							display: block;
							font-size: 14px;
							color: #333;
							margin-bottom: 4px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.member-date {
							display: block;
							font-size: 12px;
							color: #999;
						}
					}

					.member-earnings {
						text-align: right;
						flex-shrink: 0;
						margin-left: 12px;

						.earnings-value {
							display: block;
							font-size: 16px;
							color: #ff5a5f;
							font-weight: 500;
							margin-bottom: 2px;
						}

						.earnings-label {
							display: block;
							font-size: 12px;
							color: #999;
						}
					}
				}
			}

			.order-list {
				.order-item {
					background-color: #f8f8f8;
					border-radius: 8px;
					padding: 12px;
					margin-bottom: 0;
					width: 100%;
					box-sizing: border-box;
					border-bottom: 1px solid #eee;

					&:last-child {
						border-bottom: none;
					}

					.order-header {
						display: flex;
						justify-content: space-between;
						margin-bottom: 8px;

						.order-id {
							font-size: 12px;
							color: #666;
							flex: 1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.order-status {
							font-size: 12px;
							color: #ff5a5f;
							margin-left: 8px;
							flex-shrink: 0;
						}
					}

					.order-content {
						display: flex;
						margin-bottom: 8px;

						.order-image {
							width: 60px;
							height: 60px;
							border-radius: 4px;
							margin-right: 10px;
							flex-shrink: 0;
						}

						.order-info {
							flex: 1;
							min-width: 0;

							.order-title {
								display: block;
								font-size: 14px;
								color: #333;
								margin-bottom: 8px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.order-meta {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.order-price {
									font-size: 12px;
									color: #666;
								}

								.order-commission {
									font-size: 12px;
									color: #ff5a5f;
									margin-left: 8px;
								}
							}
						}

						.order-footer {
							text-align: right;

							.order-time {
								font-size: 12px;
								color: #999;
							}
						}
					}
				}
			}
		}

		.stats-footer {
			padding: 15px;
			border-top: 1px solid #f0f0f0;
			text-align: center;

			.btn-detail {
				width: 80%;
				height: 40px;
				line-height: 40px;
				background: linear-gradient(135deg, #ff5a5f, #ff3f4b);
				color: #fff;
				font-size: 14px;
				border-radius: 20px;
			}
		}
	}

	.poster-popup {
		width: 80vw;
		background-color: #fff;
		border-radius: 16px;
		overflow: hidden;

		.poster-content {
			padding: 20px;

			.poster-canvas {
				position: relative;
				width: 100%;
				aspect-ratio: 9/16;
				background-color: #fff;
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

				.poster-background {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;

					.bg-image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.poster-user-info {
					position: absolute;
					top: 40px;
					left: 0;
					width: 100%;
					text-align: center;

					.user-avatar {
						width: 80px;
						height: 80px;
						border-radius: 40px;
						border: 3px solid #fff;
						margin-bottom: 10px;
					}

					.user-name {
						display: block;
						font-size: 18px;
						font-weight: bold;
						color: #fff;
						margin-bottom: 5px;
					}

					.user-title {
						display: block;
						font-size: 14px;
						color: rgba(255, 255, 255, 0.9);
					}
				}

				.poster-qrcode {
					position: absolute;
					bottom: 100px;
					left: 50%;
					transform: translateX(-50%);
					text-align: center;

					.qrcode-image {
						width: 120px;
						height: 120px;
						background-color: #fff;
						border-radius: 8px;
						padding: 6px;
						margin-bottom: 8px;
					}

					.scan-text {
						display: block;
						font-size: 14px;
						color: #fff;
					}
				}

				.poster-text {
					position: absolute;
					bottom: 40px;
					left: 0;
					width: 100%;
					text-align: center;

					.slogan {
						display: block;
						font-size: 24px;
						font-weight: bold;
						color: #fff;
						margin-bottom: 8px;
					}

					.description {
						display: block;
						font-size: 14px;
						color: rgba(255, 255, 255, 0.9);
					}
				}
			}
		}

		.poster-actions {
			display: flex;
			padding: 15px;
			border-top: 1px solid #eee;

			button {
				flex: 1;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				border-radius: 20px;
				margin: 0 8px;

				&.btn-cancel {
					background-color: #f5f5f5;
					color: #666;
				}

				&.btn-save {
					background: linear-gradient(135deg, #ff5a5f, #ff3f4b);
					color: #fff;
				}
			}
		}
	}
</style>